<template>
  <v-container fluid tag="section">
    <v-row justify="center">
      <!-- <v-col cols="12" md="4"> -->
        <base-material-card color="primary" style="width: 400px;max-width: 100%;">
          <template v-slot:heading>
            <div class="display-2 font-weight-light">服务器登录信息</div>
            <div class="subtitle-1 font-weight-light">记得请先开启Tshock的REST API选项</div>
          </template>

          <v-form ref="form">
            <v-container class="py-0">
              <v-row>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="IP或域名"
                    class="purple-input"
                    v-model="FormData.ip"
                    :rules="[v => !!v || '必填']"
                  />
                </v-col>

                <v-col cols="12" md="6">
                  <v-text-field
                    label="端口"
                    class="purple-input"
                    v-model="FormData.port"
                    :rules="[v => !!v || '必填']"
                  />
                </v-col>

                <v-col cols="12">
                  <v-text-field
                    label="管理员账号"
                    class="purple-input"
                    v-model="FormData.user"
                    :rules="[v => !!v || '必填']"
                  />
                </v-col>

                <v-col cols="12">
                  <v-text-field
                    label="密码"
                    class="purple-input"
                    v-model="FormData.password"
                    :rules="[v => !!v || '必填']"
                  />
                </v-col>

                <v-col cols="6" class="text-right">
                  <v-btn block color="secondary" class="mr-0" @click="showTest">test</v-btn>
                </v-col>
                <!-- <v-col cols="12" class="text-right">
                  <v-checkbox v-model="checkbox" label="启用https（未实现）"></v-checkbox>
                </v-col>-->
                <v-col cols="12" class="text-right">
                  <v-btn
                    block
                    color="primary"
                    class="mr-0"
                    :loading="loading"
                    :disabled="loading"
                    @click="submit"
                  >提交</v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </base-material-card>
      <!-- </v-col> -->
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      FormData: {
        ip: "",
        port: "",
        user: "",
        password: ""
      }
    };
  },
  mounted() {
    this.FormData = this.$store.state.FormData;
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        //预先存储服务器信息
        this.$store.commit("FORM_DATA", this.FormData);
        this.request
          .get(
            "/token/create?username=" +
              this.FormData.user +
              "&password=" +
              this.FormData.password
          )
          .then(res => {
            this.loading = false;
            // console.log(res);
            this.saveInfo(res);
          })
          .catch(error => {
            this.loading = false;
          });
      }
    },
    saveInfo(res) {
      //存储服务器信息
      this.$store.commit("FORM_DATA", this.FormData);
      this.$store.commit("SET_TOKEN", res.token);
      // console.log(this.$store.state.FormData);
      this.$router.push({ name: "仪表盘" });
    },
    showTest() {
      this.$store.commit("FORM_DATA", this.FormData);
      this.$router.push({ name: "仪表盘" });
    }
  }
};
</script>

<style>
</style>